<template>
	<div>
		<el-card class="!border-none pt-4" shadow="never">
			<el-form class="ls-form el-set-form" :model="formData" inline>
				<el-form-item label="订单编号">
					<el-input  placeholder="请输入" v-model="formData.Number" clearable />
				</el-form-item>
				<el-form-item label="客户名称">
					<el-input  placeholder="请输入" v-model="formData.Number" clearable />
				</el-form-item>
				<el-form-item label="销售人员">
					<el-input  placeholder="请输入" v-model="formData.Number" clearable />
				</el-form-item>
				<el-form-item>
					<el-button class="main-color1 w-[76px]" >重置</el-button>
					<el-button class="w-[76px]" type="primary" color="#0054A6">查询</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none mt-4" shadow="never">
			<div class="text-right">
				<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">
					<router-link :to="{
					        path: getRoutePath('saleOrder.saleOrder/CreateOrder'),
					        query: {
					            id: '1'
					        }
					    }">
						<span>创建订单</span>
					</router-link>
				</el-button>
			</div>
		    <el-tabs v-model="tabsActive" @tab-change="getLists">
		        <el-tab-pane
		            v-for="(item, index) in tabsMap"
		            :key="index"
		            :label="item.name"
		            :name="item.type"
		            lazy
		        ></el-tab-pane>
		    </el-tabs>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="订单编号" prop="scene_name" align="center" width="120">
					<template #default="{ row }">
						<span class="main-color">22222</span>
					</template>
				</el-table-column>
				<el-table-column label="客户公司名称" prop="询价单" align="center"  width="200"/>
				<el-table-column label="销售人员" prop="上海AAAA有限公司" align="center" width="150"/>
				<el-table-column label="订单总金额" prop="王小明" align="center" width="150"/>
				<el-table-column label="创建时间" prop="王小明" align="center" width="150"/>
				<el-table-column label="状态" prop="王小明" align="center" width="150"/>
				<el-table-column label="操作" fixed="right" align="center" >
					<template #default="{ row }">
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/CreateOrder'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">编辑</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">创建采购单</span>
						</el-button>
						<el-button type="primary" link >
							<!-- <router-link :to="{
							        path: getRoutePath(''),
							        query: {
							            id: '1'
							        }
							    }">
							</router-link> -->
							<span class="main-color1">货代询价</span>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">收款</span>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">催完工</span>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">催生产图片</span>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/ProductionRecords'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">生产记录</span>
							</router-link>
						</el-button>
						<el-button type="primary" link @click="deliveryShow=true">
							<span class="main-color1">申请发货</span>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/DeliveryAudit'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">发货审核</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/PackagingData'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">包装数据</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/CommissionEntry'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">提成录入</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">发货记录</span>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/POTable'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">生成po表</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/DocumentManagement'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">单据管理</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">申请发放提成</span>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">po表下载</span>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('saleOrder.saleOrder/complain'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">投诉建议</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">催单</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="p-[20px] v-flex v-row-right">
				<el-pagination color="#0054A6" background layout="prev, pager, next" :default-page-size="6" :total="1000"
					:pager-count="6" />
			</div>
		</el-card>
		<!-- 申请发货 -->
		<el-dialog v-model="deliveryShow" title="申请发货" width="20%">
		   <div>
			  <div class="main-color v-flex v-col-top">
			  	<span>描述：</span>
			  	<el-input type="textarea" :rows="3" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
			  </div>
			  <div class="text-center mt-[30px] pb-[20px]">
			  	<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">确认</el-button>
			  </div>
		   </div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const formData = reactive({
		Number: '',
		type: '',
	})
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
	enum NoticeEnums {
	    All = 1,
	    PLATFORM = 2,
		HasRead = 3
	}
	const tabsActive = ref(NoticeEnums.All)
	const tabsMap = [
	    {
	        name: '全部',
	        type: 1
	    },
	    {
	        name: '未生产',
	        type: 2
	    },
		{
		    name: '生产中',
		    type: 3
		},
		{
		    name: '待发货',
		    type: 4
		},
		{
		    name: '发货中',
		    type: 5
		},
		{
		    name: '已处理',
		    type: 6
		},
		{
		    name: '售后',
		    type: 7
		},
		{
		    name: '延期',
		    type: 8
		}
	]
	const deliveryShow = ref(false)
</script>
<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.l-80 {
		line-height: 80px;
	}

	.border-color-eee {
		border-color: #EEEEEE;
	}
	:deep() .el-dialog__title{
		color: var(--el-text-color-main);
	}
	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>